<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/tab.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.tab{
			width: 400px;
			height: 400px;
		}
		.tab .tabNav{
			overflow: hidden;
		}
		.tab .tabNav li{
			box-sizing:border-box;
			list-style: none;
			float: left;
			width: 100px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border:1px solid #ccc;
		}
		.tab .tabNav .active{
			background-color: red;
		}
		.tab .tabContent{
			box-sizing:border-box;
			border:1px solid #ccc;
			height: 360px;
			width: 400px;
			display: none;
		}
		.picTab .Nav{
			overflow: hidden;
		}
		.picTab .Nav li{
			box-sizing:border-box;
			list-style: none;
			float: left;
			width: 100px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			border:1px solid #ccc;
		}
		.picTab .contentDiv{
			box-sizing:border-box;
			border:1px solid #ccc;
			height: 360px;
			width: 400px;
			display: none;
		}
		.picTab .Nav .active{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="tab">
		<ul class="tabNav">
			<li class="active tabNavLi">百度</li>
			<li class="tabNavLi">腾讯</li>
			<li class="tabNavLi">案例</li>
			<li class="tabNavLi">京东</li>
		</ul>
		<div class="content">
			<div class="tabContent" style="display: block">	
				百度
			</div>
			<div class="tabContent">
				腾讯
			</div>
			<div class="tabContent">
				案例
			</div>
			<div class="tabContent">
				京东
			</div>
		</div>
	</div>

	<div class="picTab">
		<ul class="Nav">
			<li class="active li">百度</li>
			<li class="li">腾讯</li>
			<li class="li">案例</li>
			<li class="li">京东</li>
		</ul>
		<div class="content">
			<div class="contentDiv" style="display: block">	
				百度
			</div>
			<div class="contentDiv">
				腾讯
			</div>
			<div class="contentDiv">
				案例
			</div>
			<div class="contentDiv">
				京东
			</div>
		</div>
	</div>
	<script>
		$(function(){
			// $(".tabNav").find("li").click(function(){
			// 	var index=$(this).index()
			// 	$(this).addClass("active").siblings().removeClass("active")
			// 	$(".tabContent").eq(index).show().siblings().hide()
			// })
			//选项卡封装成插件
			$(".tab").tab()
			$(".picTab").tab({event:"mouseenter","tabNav":".li",tabDiv:".contentDiv"})
		})
	</script>
</body>
</html>